<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">


<html>
	<script language="JavaScript" type="text/JavaScript">
		window.onload = function()
		{
			document.getElementById("submit").style.display = 'none';
			if('${error}' != "true")
				document.getElementById("errordiv").style.display = 'none';
			if('${userSession}' ==  "" || '${userSession}' ==  null)
				self.location = "login.jsp";
		}
		
		function isEmpty(str)
		{
			if(str == null || str == "")
				return true;
			else
				return false;
		}
		
		function isValidDate(date)
		{
		    var matches = /^(\d{2})[-\/](\d{2})[-\/](\d{4})$/.exec(date);
		    if (matches == null) return false;
		    var d = matches[2];
		    var m = matches[1] - 1;
		    var y = matches[3];
		    var composedDate = new Date(y, m, d);
		    return composedDate.getDate() == d &&
		            composedDate.getMonth() == m &&
		            composedDate.getFullYear() == y;
		}	
		
		function validatePage()
		{
			var firstname = document.getElementsByName("firstname")[0].value;
			var lastname = document.getElementsByName("lastname")[0].value;
			var dob = document.getElementsByName("dob")[0].value;
			var ssn = document.getElementsByName("ssn")[0].value;
			var phone = document.getElementsByName("phone")[0].value;
			var email = document.getElementsByName("email")[0].value;
			var address = document.getElementsByName("address")[0].value;
			var city = document.getElementsByName("city")[0].value;
			var state = document.getElementsByName("state")[0].value;
			var zip = document.getElementsByName("zip")[0].value;

			if(isEmpty(firstname))alert("Please enter first name.");
			else if(isEmpty(lastname))alert("Please enter last name.");
			else if(isEmpty(dob))alert("Please enter date of birth.");
			else if(!isValidDate(dob))alert("Please enter date of birth in MM-DD-YYYY format.");
			else if(isEmpty(ssn))alert("Please enter ssn.");
			else if(isNaN(ssn) || (ssn.length != 9))alert("Please enter valid SSN.");
			else if(isEmpty(phone))alert("Please enter phone number.");
			else if((phone.length != 10) || isNaN(phone))alert("Please enter valid phone number.");
			else if(isEmpty(email))alert("Please enter email.");
			else if(isEmpty(address))alert("Please enter address.");
			else if(isEmpty(city))alert("Please enter city.");
			else if(isEmpty(state))alert("Please enter state.");
			else if(isEmpty(zip))alert("Please enter zip code.");
			else if(isNaN(zip) || (zip.length != 5))alert("Please enter valid zip code.");
			else document.getElementById("submit").click();
		}
	</script>
	<body>
		<form method="post" action="newCustomer">
			<h1>New Customer</h1>
			<div id="errordiv">
			<b>Error creating new customer. Please contact System Administrator.</b>
			<br><br>
			</div>
			<table>
	
				<tr><td>First Name: </td>
				<td><input type="text" name="firstname" size="20" maxlength="20" value="${person.firstname}"/></td></tr>
				<tr><td>Last Name: </td>
				<td><input type="text" name="lastname" size="20" maxlength="20" value="${person.lastname}"/></td></tr>
				<tr><td>Date of Birth: </td>
				<td><input type="text" name="dob" size="10" maxlength="10" value="${person.dob}"/></td></tr>
				<tr><td>SSN: </td>
				<td><input type="text" name="ssn" size="9" maxlength="9" value="${person.ssn}"/></td></tr>
				<tr><td>Phone: </td>
				<td><input type="text" name="phone" size="10" maxlength="10" value="${person.phone}"/></td></tr>
				<tr><td>Email: </td>
				<td><input type="text" name="email" size="20" maxlength="80" value="${person.email}"/></td></tr>
				<tr><td>Address: </td>
				<td><input type="text" name="address" size="20" maxlength="80" value="${person.address}"/></td></tr>
				<tr><td>City: </td>
				<td><input type="text" name="city" size="20" maxlength="20" value="${person.city}"/></td></tr>
				<tr><td>State: </td>
				<td><input type="text" name="state" size="20" maxlength="20" value="${person.state}"/></td></tr>
				<tr><td>Zip Code: </td>
				<td><input type="text" name="zip" size="5" maxlength="5" value="${person.zip}"/></td></tr>
			</table><br><br>

			<input type="button" value="Create Customer" onclick="validatePage();"/>	
			<input id="submit" type="submit" name="submit" value="submit"/>	
		</form>
	</body>
</html>